<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Smart Speaker Control Panel</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <p>总开关：{{总开关}}</p>
        <p>空调开关: {{ 空调开关 }}</p>
        <p>空调温度: {{ 空调温度 }}</p>
        <p>环境温度: {{ 环境温度 }}</p>
        <p>湿度: {{ 湿度 }}%</p>
        <p>报警器：{{ 报警器 }}</p>
        <p>烟雾浓度：{{ 烟雾浓度 }}</p>
        <p>燃气浓度：{{燃气浓度}}</p>
        <p>排风开关：{{排风开关}}</p>
        <p>水质指示灯：{{水质指示灯}}</p>
        <p>电磁水阀门：{{电磁水阀门}}</p>
        <p>温度自动调节:{{温度自动调节}}</p>
        <p>湿度检测：{{ 湿度检测 }}</p>
        <p>烟雾：{{ 烟雾检测 }}</p>
        <p>燃气：{{ 燃气检测 }}</p>
        <p>TDS：{{ TDS }}</p>

    </div>

    <div>
        <button @click="togglePower">Toggle Power</button>
        <button @click="windPower">Wind Power</button>
        <button @click="waterPower">WaterPower</button>
        <button @click="temPower">Tem Power</button>
        <button @click="ktPower">Kt Power</button>

    </div>
</div>

<script>

    let ws = new WebSocket("ws://localhost:8080/myWs")

    // 监听WebSocket消息
    ws.onmessage = function(event) {
        const dataFrame = event.data.trim();

        // 检查数据帧格式
        if (dataFrame.match(/^Hwct\d+T$/)) { //温度数据帧
            handleReceivedFrame(dataFrame);
        }else if(dataFrame.match(/^Hwcs\d+T$/)){ //湿度
            handleReceivedFrame(dataFrame);
        }else if(dataFrame.match(/^Hwcn\d+T$/)){ //烟雾浓度
            handleReceivedFrame(dataFrame);
        }else if(dataFrame.match(/^Hwcv\d+T$/)){ //电压
            handleReceivedFrame(dataFrame);
        }else if(dataFrame.match(/^Hwcr\d+T$/)){ //燃气浓度
            handleReceivedFrame(dataFrame);
        }
        else {
            console.info('接收到的数据帧格式不正确');
            console.info(dataFrame);
        }
    }
    function handleReceivedFrame(frame) {
        if (frame.startsWith('Hwct')) {
            // 解析数据帧中的温度
            const tem = frame.slice(4, -1);
            // 更新环境温度
            app.环境温度 = tem;
        } else if (frame.startsWith('Hwcs')) {
            // 解析数据帧中的湿度
            const s = frame.slice(4, -1);
            // 更新湿度
            app.湿度 = s;
        } else if (frame.startsWith('Hwcn')) {
            // 解析数据帧中的烟雾浓度
            const n = frame.slice(4, -1);
            // 更新烟雾浓度
            app.烟雾浓度 = n ;
        } else if (frame.startsWith('Hwcv')) {
            // 解析数据帧中的电压
            const v = frame.slice(4, -1);
            app.电压 = v ;
        }else if(frame.startsWith('Hwcr')){
            const r = frame.slice(4, -1);
            app.燃气浓度 = r ;
        }
        else {
            console.warn('无法识别的数据帧格式:', frame);
        }
    }
  /*
    let ws = new WebSocket("ws://localhost:8080/myWs")
    let switchState = 'off'; // 初始状态为关闭
    // 建立连接时发送音箱ID到服务器
    ws.onopen = function(event) {
        const speakerId = app.Id; // 这里假设音箱ID是静态的，如果是动态的需要从其他地方获取
        ws.send("音箱Id"+speakerId);
    };

    // 监听WebSocket消息
    ws.onmessage = function(event) {
        const dataFrame = event.data.trim();

        // 检查数据帧格式
        if (dataFrame.match(/^Hwct\d+T$/)) {
            handleReceivedFrame(dataFrame);
        }else if(dataFrame.match(/^Hwcyl\d+T$/)){
            handleReceivedFrame(dataFrame);
        }else if(dataFrame.match(/^Hwc(on|off)T$/)){
            handleReceivedFrame(dataFrame);
        }else if(dataFrame.match(/^Hwpl(11|22)T$/)){
            handleReceivedFrame(dataFrame);
        }
        else {
            console.info('接收到的数据帧格式不正确');
            console.info(dataFrame);
        }
    }
    function handleReceivedFrame(frame) {
        if (frame.startsWith('Hwct')) {
            // 解析数据帧中的最大安全运行时间
            const maxTime = frame.slice(4, -1);
            // 更新最大运行安全时间
            app.maxRunTime = maxTime;
        }else if(frame.startsWith('Hwcyl')){
            // 解析数据帧中的音量
            const voice = frame.slice(5, -1);
            // 更新音量
            app.音量 = voice;
        }else if(frame.startsWith('Hwc')){
            // 解析数据帧中的音箱开关状态
             const switchState = frame.slice(3, -1);
            // 更新开关状态
            app.总开关 = switchState === 'on' ? 'on' : 'off';
        } else if(frame.startsWith('Hwpl')){
            const match = frame.match(/Hwpl(\d\d)/);
            if (match) {
                const powerlight = match[1];
                let lightStatus;
                if (powerlight === '11') {
                    lightStatus = app.总开关 === 'on' ? '橙色' : 'off';
                } else if (powerlight === '22') {
                    lightStatus = app.总开关 === 'on' ? '蓝色' : 'off';
                } else {
                    console.warn('未知的充电状态代码:', powerlight);
                    lightStatus = '未知';
                }
                // 更新UI或执行相应操作
                app.PowerLight = lightStatus;
            } else {
                console.warn('无法识别的充电状态数据帧格式:', frame);
                // 可能需要设定一个默认行为或者忽略此帧
            }

            // 解析数据帧中的充电状态
            const powerlight = frame.slice(5, -1);
            // 更新充电指示灯状态
            if (powerlight === 11) {
                app.PowerLight = (app.总开关 === 'on' ? '橙色' : 'off'); // 充电且音响开启时为橙色
            } else if (powerlight === 22) {
                app.PowerLight = (app.总开关 === 'on' ? '蓝色' : 'off'); // 未充电但音响开启时为蓝色
            } else {
                console.warn('不识别的充电状态数据帧:', frame);
                app.PowerLight = 'off'; // 其他情况，如数据帧错误或不符合预期，灯灭
            }


        }

        else if(frame.startsWith('Hwcpl')){
            // 解析数据帧中的充电状态
            const powerlight = frame.slice(5, -1);
            // 更新充电指示灯状态
            // 根据充电状态设置指示灯颜色
            if (powerlight === '11') {
                app.PowerLight = switchState === 'on' ? '橙色' : 'off';
            } else if (powerlight === '22' && switchState === 'on') {
                app.PowerLight = '蓝色';
            } else {
                app.PowerLight = 'off'; // 充电状态不影响指示灯颜色
            }
        }


    }

   */






        const app=new Vue({
            el: '#app',
            data: {
                总开关:'off',
                空调开关: 'off',
                空调温度: '',
                环境温度:'',
                湿度: '',
                报警器:' ',
                烟雾浓度: '',
                燃气浓度: '',
                排风开关: 'off',
                电压:'1',
                水质指示灯: '绿色',
                电磁水阀门: 'off',
                温度自动调节:'off',
                湿度检测:'未超标',
                烟雾检测:'未超标',
                燃气检测:'未超标',
                TDS:0,
                ywalert:0,


            },
            methods: {

                togglePower() {
                    if (this.总开关 === 'off') {
                        this.总开关 = 'on';

                        if(this.烟雾浓度>15){
                            this.startywAlert();
                        }
                        if(this.燃气浓度>0.05){
                            this.startrqAlert();
                        }
                        if(this.湿度>25){
                            this.startwaterAlert();
                        }
                        this.TDS=133.42*((5-this.电压)/this.电压);
                        if(this.TDS>100) {
                            this.水质指示灯='红色';
                        }else{
                            this.水质指示灯='绿色';
                        }
                    } else {
                        this.总开关 = 'off';
                    }
                    ws.send("Hwc" + this.总开关.toString() + "T");
                },
                ktPower(){
                    if (this.空调开关 === 'off') {
                        this.空调开关 = 'on';


                    } else {
                        this.空调开关 = 'off';

                    }
                    ws.send("Hwc" + this.空调开关.toString() + "T");
                },


                windPower() {
                    if (this.排风开关 === 'off') {
                        this.排风开关 = 'on';


                    } else {
                        this.排风开关 = 'off';

                    }
                    ws.send("Hwc" + this.排风开关.toString() + "T");
                },

                waterPower() {
                    if (this.电磁水阀门 === 'off') {
                        this.电磁水阀门 = 'on';

                    } else {
                        this.电磁水阀门 = 'off';

                    }
                    ws.send("Hwc" + this.电磁水阀门.toString() + "T");
                },

                temPower() {
                    if (this.温度自动调节 === 'off') {
                        this.温度自动调节 = 'on';
                        if(this.环境温度>30){
                            this.空调开关='on';
                            this.空调温度=24;
                        }
                        if(this.环境温度<18){
                            this.空调开关='on';
                            this.空调温度=24;
                        }
                    } else {
                        this.温度自动调节 = 'off';

                    }
                    ws.send("Hwc" + this.温度自动调节.toString() + "T");
                },

                startwaterAlert(){
                    this.报警器+='漏水 ';
                    this.电磁水阀门='off';
                    this.湿度检测='超标';
                },
                stopwaterAlert(){
                  this.报警器-='漏水';
                },

                startywAlert(){
                    this.报警器='失火 ';
                    this.烟雾检测='超标';
                    this.ywalert=1;
                    ws.send(this.ywalert);
                },
                stopywAlert(){
                  this.报警器-='失火';
                  this.烟雾检测='未超标';
                  this.ywalert=0;
                  ws.send(this.ywalert);
                },

                startrqAlert(){
                    this.报警器+='可燃气超标 ';
                    this.排风开关='on';
                    this.燃气检测='超标';
                },
                stoprqAlert(){
                    this.报警器-='可燃气超标 ';
                    this.排风开关='off';
                },

                waterlight(){
                    this.水质指示灯='红色';
                    // this.TDS=(133.42*((5-this.电压)/this.电压));
                    // if(this.TDS>100){
                    //     this.水质指示灯='红色';
                    // }else{
                    //     this.水质指示灯='绿色';
                    // }
                },

            },


        });


</script>
</body>
</html>
